<template>
    <div class="common-layout">
        <el-container>
          
            <el-aside width="60%">
                <el-table :data="list" empty-text="暂无数据" style="width: 100%;"
                    :header-cell-style="{ background: '#EFF0FD', color: '#606266'}" id="table" border>
                    <el-table-column fixed prop="pno" label="ID" width="100px"/>
                    <el-table-column prop="type" label="药品分类" width="150px"/>
                    <el-table-column prop="tname" label="创建人姓名" width="150px"/>
                    <el-table-column prop="tdate" label="创建时间" width="200px"/>
                    <el-table-column label="操作" show-overflow-tooltip>
                        <template #default="a">
                            <el-button color="#5B6BE8" @click="del(a.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-aside>
            <el-main>
                <div class="top">
                    <h3 style="margin-bottom: 25px;">添加药品分类</h3>
                    <el-form :inline="true" v-model="inputForm" class="demo-form-inline" :on-change="changeIamge">
                        <el-form-item label="创建人姓名" prop="name">
                            <el-input v-model="inputForm.tname" disabled />
                        </el-form-item>
                        <el-form-item label="药品分类名称" prop="name">
                            <el-input v-model="inputForm.type" placeholder="跌打损伤" />
                        </el-form-item>
                        <el-form-item label="创建时间" prop="name">
                            <div class="demo-date-picker">
                                <el-date-picker v-model="inputForm.tdate" type="datetime" placeholder="请选择日期"
                                    :size="size" :disabled-date="disabledDate" />
                            </div>
                        </el-form-item>
                    </el-form>
                    <el-button type="primary" @click="addType" class="addbutton">添加</el-button>
                </div>
                <div class="bottom">
                   
                </div>

            </el-main>
        </el-container>
    </div>
</template>

<script>
    // import VueApexCharts from 'vue-apexcharts';
    import { ElMessageBox } from 'element-plus'
    import { ElMessage } from 'element-plus'
    export default {
        name: 'TypeList',
        /* components: {
            VueApexCharts,
        }, */
        data() {
            return {
                list: [],
                Position: false,
                inputForm: {
                    tname: window.sessionStorage.getItem("username"),
                    type: '',
                    tdate: ''
                },
                a: true,
                list: [],
                Position: false,
                inputForm: {
                    tname: window.sessionStorage.getItem('username'),
                    type: '',
                    tdate: '',
                },
                a: true,
                /* chartOptions: {
                    chart: {
                        id: 'vuechart-example',
                    },
                    xaxis: {
                        categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],
                    },
                },
                series: [
                    {
                        name: 'series-1',
                        data: [30, 40, 35, 50, 49, 60, 70, 91],
                    },
                ], */

            };
        },

        mounted() {
            this.cx();
        },

        methods: {
            typeCheck(v) {
                try {
                    this.list.forEach(item => {
                        if (item.name == v) {
                            this.a = true;
                            throw new Error("type-check-error");

                        }
                        else {
                            this.a = false;
                        }
                    })
                    return true
                } catch (e) {
                    if (e.message == "type-check-error") {
                        this.$message({
                            message: '该系列已存在',
                            type: 'warning'
                        })
                        return false
                    }

                }
            },

            del(a) {
                console.log(a);
                var that = this;
                ElMessageBox.confirm(
                    '是否删除? （请谨慎考虑！）',
                    'Warning',
                    {
                        confirmButtonText: '删除',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                )
                    .then(() => {
                        that.$http.get('type/' + a.tid)
                            .then(function (result) {
                                ElMessage({
                                    type: 'success',
                                    message: '删除成功',
                                })
                                that.cx();
                            })
                            .catch(function (error) {
                                console.log("删除错误信息：", error);
                            })
                    })
                    .catch(() => {
                        ElMessage({
                            type: 'info',
                            message: '取消删除',
                        })
                    })

            },
            addType() {
                var that = this;
                var url = 'type/addType';
                that.$http.post(url, that.inputForm)
                    .then((res) => {
                        console.log(res, "res");
                        that.cx();
                        that.resertForm();
                    })
            },
            resertForm() {
                this.inputForm.tname = window.sessionStorage.getItem("username");
                this.inputForm.type = '';
                this.inputForm.tdate = '';
            },
            cx() {
                var that = this;
                var url = 'type/getType';
                this.$http.get(url)
                    .then((res) => {
                        let pno = 1;
                        console.log(res, "res");
                        that.list = res.data.map(value => {
                            value = {
                                ...value,
                                pno: pno
                            }
                            pno++;
                            return value;
                        })
                        console.log(that.list);
                    })
            },
            disabledDate(time) {
                time.getTime() > Date.now()
            },
        },
    };
</script>

<style lang="scss" scoped>
    .el-main {
        overflow: hidden;
        width: 100%;
        margin-left: 10px;

    }

    .bottom {
        height: 260px;
        background-color: #fff;
        margin-top: 30px;

       /*  /deep/.apexcharts-canvas {
            overflow: visible !important;
        } */
    }

    .top {
        height: 300px;
        background-color: #fff;
        padding: 20px;
        position: relative;
    }


    .demo-date-picker {
        display: flex;
        width: 100%;
        padding: 0;
        flex-wrap: wrap;
    }

    .demo-date-picker .block {
        padding: 30px 0;
        text-align: center;
        border-right: solid 1px var(--el-border-color);
        flex: 1;
    }

    .demo-date-picker .block:last-child {
        border-right: none;
    }

    .demo-date-picker .demonstration {
        display: block;
        color: var(--el-text-color-secondary);
        font-size: 14px;
        margin-bottom: 20px;
    }

    .addbutton {
        width: 100px;
        position: absolute;
        bottom: 30px;
        right: 30px;
    }
</style>